<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { getUserCollectionUrl, addCollectionUrl, delCollectionUrl } from '@/api/collection'
import { ArrowRight, Menu, Star, StarFilled } from '@element-plus/icons-vue'
import router from '@/router/index'
import { ref } from 'vue'
import { watch } from 'vue'
import { useRoute } from 'vue-router'
//是否收藏
const isCollection = ref<Boolean>()
//当前tab信息
const currTabInfo = ref<any>()
const route = useRoute()
const navLinks = ref<any>()
const navLinksArry = ref<any>()
const getRoutesInfo = async () => {
  navLinks.value = router.currentRoute.value.matched
  navLinks.value.shift() // 去掉第一个元素 /home
  navLinksArry.value = navLinks.value.map((item: any) => {
    return {
      path: item.path,
      meta: item.meta.title
    }
  })
  const length = navLinksArry.value.length
  //查询当前tab菜单是否已被收藏
  if (navLinksArry.value.length > 0) {
    currTabInfo.value = navLinksArry.value[length - 1]
    const params = {
      sqlId: 'userCollectionAndTrail.getUserCollection',
      sqlParam: JSON.stringify({
        appUrl: currTabInfo.value.path
      }),
      pagination: false,
      dbName: 'report',
      debug: 0
    }
    let res: any = await getUserCollectionUrl(params)
    isCollection.value = res.rows.length > 0
  }

  // console.log(navLinksArry.value);d
}
const onCollectionClick = () => {
  let operUrl = isCollection.value ? delCollectionUrl : addCollectionUrl
  let sqlId = isCollection.value
    ? 'userCollectionAndTrail.deleteUserCollection'
    : 'userCollectionAndTrail.insertUserCollection'
  let params = {
    sqlId,
    sqlParam: JSON.stringify({
      appUrl: currTabInfo.value.path,
      appName: currTabInfo.value.meta,
      appInfo: ''
    }),
    dbName: 'report',
    debug: 0
  }
  operUrl(params).then((res: any) => {
    if (res === 'success') {
      ElMessage({ message: isCollection.value ? '取消收藏成功' : '收藏成功', type: 'success' })
      isCollection.value = !isCollection.value
    } else {
      ElMessage({ message: '保存失败', type: 'error' })
    }
  })
}
watch(
  route,
  () => {
    // newRoute, oldRoute
    getRoutesInfo()
  },
  { immediate: true }
)
</script>

<template>
  <div class="fourthNav">
    <el-breadcrumb class="breadcrumbBox" :separator-icon="ArrowRight">
      <template v-for="(navItems, index) in navLinksArry" :key="navItems.path">
        <el-breadcrumb-item v-if="index === 0">
          <el-icon class="iconBox">
            <Menu />
          </el-icon>
          {{ navItems.meta }}
        </el-breadcrumb-item>
        <el-breadcrumb-item v-else>
          {{ navItems.meta }}
        </el-breadcrumb-item>
      </template>
    </el-breadcrumb>
    <div class="collections" @click="onCollectionClick">
      <el-icon class="icon" :class="[isCollection ? 'is-active' : '']"
        ><Star v-if="!isCollection" /><StarFilled v-else
      /></el-icon>
      <span>{{ isCollection ? '取消收藏' : '收藏' }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.fourthNav {
  position: relative;
  border-top: 1px solid var(--cnac-bgc1);
}
.breadcrumbBox {
  padding: 0 8px;
  height: 36px;
  line-height: 36px;
  border-bottom: 1px solid var(--cnac-bgc1);
  // border-top: 1px solid var(--cnac-bgc1);
  .iconBox {
    display: inline-block;
    font-size: 20px;
    color: var(--cnac-text2);
    margin-right: 10px;
    vertical-align: text-top;
  }
}
.collections {
  position: absolute;
  top: 6px;
  right: 10px;
  float: right;
  cursor: pointer;
  margin-right: 5px;
  .icon {
    font-size: 24px;
    color: var(--cnac-text3);
    vertical-align: -6px;
    &.is-active {
      color: var(--cnac-text2);
    }
  }
  span {
    display: inline-block;
    width: 66px;
    padding-left: 8px;
    font-size: 14px;
  }
}
</style>
